<ion-header>
    <header-component>
        <ion-toolbar>
            <ion-buttons class="button-left">
                <img navBackButton src="assets/imgs/return.svg" alt="">
            </ion-buttons>
            <ion-title>运维监控</ion-title>
        </ion-toolbar>
    </header-component>
</ion-header>
<ion-content>
    <div class="monitor-top">
        <div>
            <div echarts [options]="options" class="demo-chart" style="height:80%;"></div>
            <!-- <span><img src="assets/imgs/lift/3101.png" alt=""></span> -->
            <p>项目中断</p>
        </div>
        <div>
            <div echarts [options]="Toptions" class="demo-chart" style="height:80%;"></div>
            <!-- <span><img src="assets/imgs/lift/3101.png" alt=""></span> -->
            <p>数据栈中断</p>
        </div>
        <div>
            <div echarts [options]="Soptions" class="demo-chart" style="height:80%;"></div>
            <!-- <span><img src="assets/imgs/lift/3101.png" alt=""></span> -->
            <p>数据栈在线率</p>
        </div>
    </div>
    <div class="monitor-bottom">
        <div class="info_title">
            <p>断线数据栈</p>
        </div>
        <ion-scroll scrollY="true" class="info">
            <p>2019-01-07 10:45 香域春天 数据栈中断: 60292</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 10:45 香域春天 数据栈中断: 60292</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p>2019-01-07 11:15 研发测试项目 数据栈中断: 66666666</p>
            <p *ngIf="true">无掉线数据栈信息</p>
        </ion-scroll>
    </div>
</ion-content>